<template>
	<view class="help">
		<view class="common" v-if="type == 1">
			<view class="item" @click="goProblemDetail('常见问题', 11)">
				<view class="text">关于下单后商品发货时效的问题？</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('常见问题', 12)">
				<view class="text">关于物流及运费问题?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('常见问题', 13)">
				<view class="text">订单到期后商品如何归还?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('常见问题', 14)">
				<view class="text">可以提前还款吗?需要赔付违约金吗?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('常见问题', 15)">
				<view class="text">关于租期计算问题</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('常见问题', 16)">
				<view class="text">怎么开发票?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		
		<view class="common" v-if="type == 2">
			<view class="item" @click="goProblemDetail('支付问题', 21)">
				<view class="text">取消订单后什么时候退款?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('支付问题', 22)">
				<view class="text">如何申请免押金额度?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('支付问题', 23)">
				<view class="text">发货前的订单能不能取消?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('支付问题', 24)">
				<view class="text">发货前的订单能不能取消?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('支付问题', 25)">
				<view class="text">租赁优惠券如何使用?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		
		<view class="common" v-if="type == 3">
			<view class="item" @click="goProblemDetail('订单问题', 31)">
				<view class="text">订单问题?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('订单问题', 32)">
				<view class="text">订单流程问题?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		
		<view class="common" v-if="type == 4">
			<view class="item" @click="goProblemDetail('设备保障', 41)">
				<view class="text">商品出现故障(性能异常) 怎么办? 维修不好怎么办?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('设备保障', 42)">
				<view class="text">维修费用谁承担?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="item" @click="goProblemDetail('设备保障', 43)">
				<view class="text">商品丢失或无法维修如何处理?</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		
		<view class="end">别滑啦，已经到底了～</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				type: ""
			}
		},
		onLoad(options) {
			this.type = options.type
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '常见问题'
				})
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '支付问题'
				})
			} else if (this.type == 3) {
				uni.setNavigationBarTitle({
					title: '订单问题'
				})
			} else if (this.type == 4) {
				uni.setNavigationBarTitle({
					title: '设备保障'
				})
			}
		},
		methods: {
			goProblemDetail(title, detailId) {
				console.log(title)
				uni.navigateTo({
					url: '/pages/lease/problem-detail?title=' + title + '&detailId=' + detailId
				})
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background: #ffffff;
	}
	
	.help {
		.common {
			padding: 48rpx 34rpx 0rpx 24rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				&:last-child {
					padding-bottom: 0;
				}
				
				.text {
					font-size: 28rpx;
					color: #666666;
				}
				
				.icon-xiangyou {
					font-size: 22rpx;
				}
			}
		}
		
		.end {
			margin-top: 48rpx;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
			text-align: center;
		}
	}
</style>